
  <template>
  <!-- 休假申请 -->
  <div class="bf-commont-template">
    <div class="clearfix bf-top-button">
      <div class="float-l">
        <el-button @click="showAdd" type="primary">发起申请</el-button>
      </div>
      <div class="float-r">
        <div class="float-l">
          <el-input placeholder="请输入申请名称搜索内容" prefix-icon="el-icon-search" v-model="searchData" @keyup.enter.native="quickSearch"></el-input>
        </div>
        <div class="float-l padding-l">
          <el-button @click="showSearch" type="primary">高级筛选</el-button>
        </div>
      </div>
    </div>

    <bf-table :data="userData" :setting="listSetting" :rowAction="rowAction" @editSubmit="editSubmit" @pageChange="pageChange" ref="table"></bf-table>
    <!-- 添加 -->
    <bf-table-edit :rowNum="2" :width="800" :editForm='addDetailSetting' :title="'添加休假申请'" :submitButtons="submitButtons" ref='addRosterRef' @formSubmit='addSubmit' :editRules="addRules"></bf-table-edit>
    <!-- 高级搜索 -->
    <bf-table-search :editForm='listSetting' :title="'高级搜索'" ref='searchRosterRef' @formSubmit='searchRosterSubmit'></bf-table-search>
    <!-- 编辑 -->
    <bf-table-edit :rowNum="2" :width="800" :editForm='detailSetting' :title="'编辑'" :submitButtons="editButtons" ref='editRosterRef' @formSubmit='editRosterSubmit' :editRules="addRules"></bf-table-edit>
    <!--详情-->
    <bf-table-detail :rowNum="2" :width="800" ref="bfTableDetail" :title="'休假详情'" :editForm="detailSetting" :showHistory='true' :approveSetting='approveSetting1'></bf-table-detail>

  </div>
</template>
<script>
import { listSetting, detailSetting, addDetailSetting } from './table.setting.js'
import { deleteApply, getVacationApplyList, getUserInFo, addVacationApply, getDetail, updateVacation, updateBack, giveup } from './api.js'
export default {
  data() {
    return {
      approveSetting1: {
        procDefKey: 'attendance-vacation',
        businessKey: ''
      },
      searchData: '',
      userData: {
      },
      submitButtons: [

        {
          title: '提交',
          click: (form) => {
            form.status = '1'
            this.addSubmit(form)
          }
        },
        {
          title: '暂存',
          click: (form) => {
            form.status = 0
            this.addSubmit(form)
          }
        },
        {
          title: '取消',
          validate: false,
          click: (form) => {
            this.$refs.addRosterRef.hiden()
          }
        }
      ],

      editButtons: [

        {
          title: '提交',
          click: (form) => {
            if (form.status === '1') {
              form.status = '1'
              form.action = 1
              this.updateBackApply(form)
            } else {
              form.status = '1'
              form.action = 1
              this.editRosterSubmit(form)
            }
          }
        },
        {
          title: '暂存',
          click: (form) => {
            if (form.status === '1') {
              form.status = 0
              form.action = 1
              this.updateBackApply(form)
            } else {
              form.status = 0
              this.editRosterSubmit(form)
            }
          }
        },
        {
          title: '取消',
          validate: false,
          click: (form) => {
            this.$refs.editRosterRef.hiden()
          }
        }
      ],
      rowAction: [
        {
          label: '查看',
          click: (item) => {
            this.approveSetting1.businessKey = item.scope.row.id
            this.findDetailById(item.scope.row.id, this.$refs.bfTableDetail.show)
          }
        },
        {
          label: '编辑',
          hiddenStatus: (row) => {
            if ((row.taskDefKey === 'modify' || row.taskDefKey === undefined) && (row.status === '0' || row.status === '1')) {
              return true
            } else {
              return false
            }
          },
          click: (item) => {
            if ((item.scope.row.taskDefKey === 'modify' || item.scope.row.taskDefKey === undefined) && (item.scope.row.status === '0' || item.scope.row.status === '1')) {
              this.findDetailById(item.scope.row.id, this.$refs.editRosterRef.show)
            } else {
              this.$message({
                message: '该阶段不可编辑',
                type: 'error'
              })
            }
          }
        },
        {
          label: '提交',
          hiddenStatus: (row) => {
            if (row.status === '1' && row.taskDefKey === 'modify') {
              return true
            } else if (row.status === '0') {
              return true
            } else {
              return false
            }
          },
          click: (item) => {
            if (item.scope.row.status === '1' && item.scope.row.taskDefKey === 'modify') {
              item.scope.row.action = 1
              this.updateBackApply(item.scope.row)
            } else if (item.scope.row.status === '0') {
              item.scope.row.status = 1
              item.scope.row.action = 1
              this.editRosterSubmit(item.scope.row)
            } else {
              this.$message({
                message: '该状态不可提交',
                type: 'error'
              })
              return false
            }
          }
        }, {
          label: '删除',
          hiddenStatus: (row) => {
            if (row.status === '0') {
              return true
            } else {
              return false
            }
          },
          click: (item) => {
            if (item.scope.row.status === '0') {
              this.$refs.table.showDelete(item)
            } else {
              this.$message({
                message: '退回修改状态不可删除',
                type: 'error'
              })
              return false
            }
          }
        },
        {
          label: '放弃申请',
          hiddenStatus: (row) => {
            if (row.status === '1' && row.taskDefKey === 'modify') {
              return true
            } else {
              return false
            }
          },
          click: (item) => {
            if (item.scope.row.status === '1' && item.scope.row.taskDefKey === 'modify') {
              this.giveupApply(item.scope.row)
            } else {
              this.$message({
                message: '该状态不可放弃',
                type: 'error'
              })
              return false
            }
          }
        }
      ],
      listSetting: listSetting,
      detailSetting: detailSetting,
      addDetailSetting: addDetailSetting,
      addRules: {
        applyName: [
          { required: true, message: '必填项', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20个字符', trigger: 'blur' }
        ],
        department: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        vacationStartDate: [
          { required: true, message: '请选择请假开始时间', trigger: 'blur' }
        ],
        vacationEndDate: [
          { required: true, message: '请选择请假结束时间', trigger: 'blur' }
        ],
        vacationType: [
          { required: true, message: '请选择请假类型', trigger: 'blur' }
        ],
        vacationDays: [
          { required: true, message: '请输入请假天数', trigger: 'blur' }
        ],
        applyReasion: [
          { required: true, message: '请输入申请原因', trigger: 'blur' },
          { min: 2, max: 200, message: '长度在 2 到 200个字符', trigger: 'blur' }
        ]
      },
      searchParams: { // 搜索条件
        page: 1
      }
    }
  },
  mounted: function() {
    this.searchList();
  },
  methods: {
    /**
     * 放弃申请
     */
    giveupApply(form) {
      form.action = 0
      giveup(form).then((response) => {
        if (response.success) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        }
        this.searchList()
      })
    },
    /**
     * 退回修改提交
     */
    updateBackApply(form) {
      updateBack(form).then((response) => {
        if (response.success) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        }
        this.searchList()
        this.$refs.addRosterRef.hiden()
        this.$refs.editRosterRef.hiden()
      })
    },

    searchList() {
      getVacationApplyList(this.searchParams).then((response) => {
        this.userData = response
      })
    },
    addSubmit(form) { // 新增
      addVacationApply(form).then((response) => {
        if (response.success) {
          this.$message({
            message: '新增成功',
            type: 'success'
          })
          this.$refs.addRosterRef.hiden()
          this.$refs.editRosterRef.hiden()
          this.searchList()
        }
      })
    },
    searchRosterSubmit(form) {
    },
    editRosterSubmit(form) { // 编辑
      updateVacation(form).then((response) => {
        if (response.success) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.$refs.addRosterRef.hiden()
          this.$refs.editRosterRef.hiden()
          this.searchList()
        }
      })
    },
    vacationSubmit(id) { // 提交休假申请
      getDetail(id).then((response) => {
        response.data.status = '1'
        addVacationApply(response.data).then((response) => {
          if (response.success) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.$refs.addRosterRef.hiden()
            this.searchList()
          }
        })
      })
    },
    findDetailById(id, showCall) { // 单条详情
      getDetail(id).then((response) => {
        showCall(response.data)
      })
    },
    editSubmit(params, formType, formList) { // ???
      if (formType === 'delete') {
        this.deleteItem(params.row.id)
      }
      if (formType === 'search') { // 高级搜索
        this.searchParams.applyName = params.applyName
        this.searchParams.status = params.status
        this.searchParams.vacationType = params.vacationType
        this.searchList()
        this.$refs.table.hidenForm()
      }
    },

    deleteItem(id) { // 删除
      deleteApply(id).then((response) => {
        if (response.success) {
          this.$message({
            message: '删除成功!',
            type: 'success'
          })
          this.searchList()
        }
      })
    },
    pageChange(pageObj) { // 分页
      // console.log(pageObj)
      this.searchParams.page = pageObj.page
      this.searchParams.pageSize = pageObj.pageSize
      this.searchList()
    },
    showSearch() {
      this.$refs.table.showSearch()
    },
    showAdd() {
      getUserInFo().then((response) => {
        if (response.data === undefined) {
          this.$message({
            message: '该登录用户获取不到员工信息！',
            type: 'error'
          })
          return
        }
        this.$refs.addRosterRef.show(response.data)
      })
    },
    quickSearch() {
      this.searchParams.page = 1
      this.searchParams.applyName = this.searchData
      this.searchList()
    }
  }
}
</script>

<style scoped>

</style>
